<!-- 找院校 -->
<template>
	<view class="school">
		<!-- 顶部图片说明 -->
		<!-- <view class="top-bg"></view> -->
		<image class="top-bg"
			src="https://aihelp.oss-cn-hangzhou.aliyuncs.com/public/base/2023/10/16/7d1630a695d549d7871b526c3c3a2b16.png"
			mode="widthFix"></image>
		<view class="contents">
			<view class="searchs">
				<view class="search-box">
					<view class="input-box flex">
						<uni-icons type="search" size="20" color="#000"></uni-icons>
						<input class="font14" placeholder="请输入大学名称" v-model="searchParam.title" @input="handleSearch" />
						<uni-icons type="clear" @click="handleClear" size="18"
							:color="searchParam.title.length>0?'#F7DD5E':'#fff'"></uni-icons>
					</view>
				</view>
				<view class="other-box flex alignCenter">
					<view class="search-select flex alignCenter" @click="handlePopup(1)">
						<text class="bold font12" :class="arreaName==''?'':'font14 select-item'">{{arreaName||'省份' }} </text>
						<uni-icons type="bottom" size="14" :color="arreaName?'#F7DD5E':'#000'" style="margin-left: 10rpx;"
							@click="handlePopup(1)"></uni-icons>
					</view>
					<view class="search-select flex alignCenter" @click="handlePopup(2)">
						<text class="bold font12" :class="option1Name==''?'':'font14 select-item'">{{option1Name||'学校层次'}} </text>
						<uni-icons type="bottom" size="14" :color="option1Name?'#F7DD5E':'#000'" style="margin-left: 10rpx;"
							@click="handlePopup(2)"></uni-icons>
					</view>
					<view class="search-select flex alignCenter" @click="handlePopup(3)">
						<text class="bold font12" :class="classFyName==''?'':'font14 select-item'"> {{classFyName||'学校类型'}}</text>
						<uni-icons type="bottom" size="14" :color="classFyName?'#F7DD5E':'#000'" style="margin-left: 10rpx;"
							@click="handlePopup(3)"></uni-icons>
					</view>
				</view>

			</view>

			<view class="lists">
				<view class="content-item" v-for="(item,index) of schoolList" :key="item.id" @click.stop="handleClick(item)">
					<view class="flex">
						<view class="classFy font12" :style="`background:`+colorList[item.schoolClassify]">{{item.schoolClassify}}
						</view>
						<!-- 左侧图片 -->
						<view class="left">
							<image :src="item.imageUrl" mode="widthFix"></image>
						</view>

						<!-- 右侧数据 -->
						<view class="right">
							<view class="title flex alignCenter">
								<!-- {{item.title}} -->
								<view class="school-name flex">
									<text class="font16 bold">{{item.title}}</text>
								</view>
								<view class="hot-num font12 bold flex">
									<image src="@/static/image/index/hot.png" mode="widthFix"></image>{{item.hot}}
								</view>

								<!-- <view class="font12 flex" style="margin-left: 10rpx;">
									<image src="@/static/image/index/hot.png"></image>{{item.hot}}
								</view> -->
							</view>
							<view class="area-name font12 flex">
								<uni-icons class="area-icon" type="location-filled" size="15" color="#797979"></uni-icons>
								<!-- <image src="@/static/image/icons/area.png" mode="widthFix"></image> -->
								{{item.areaName}}
							</view>

							<view class="type flex flexWrap">
								<view class="name font12" v-for="(val,i) of item.schoolTypeName.split(',')" :key="i">{{val}}</view>
							</view>

						</view>
					</view>
					<view class="add-btn font14 flex" @click.stop="handAdd(item)">+加入对比库</view>

				</view>

			</view>
		</view>
		<view v-if="schoolList.length>=total" class="font12 noMore-data"> - 没有更多数据了 - </view>
		<u-popup mode="bottom" :mask-close-able="false" v-model="searchPopup">
			<view class="popup-box">
				<view class="flex btns">
					<view class="font14 cancel" @click="handleCancel">取消</view>
					<view class="font14 sure" @click="handleSure">确认</view>
				</view>
				<view class="search-contents">
					<view v-if="popType == 1">
						<view v-for="(item,index) in options" :key="index"
							:class="index==optionsIndex?'chooseItem':(optionsIndex=='-1'?item.id == searchParam.areaId?'chooseItem':'':'')"
							@click="optionsIndex = index">{{item.fullName}}</view>
					</view>
					<view v-if="popType == 2">
						<view v-for="(item,index) in options1" :key="index"
							:class="index==options1Index?'chooseItem':(options1Index=='-1'?item.dictValue == searchParam.schoolType?'chooseItem':'':'')"
							@click="options1Index = index">{{item.dictLabel}}</view>
					</view>
					<view v-if="popType == 3">
						<view v-for="(item,index) in schoolClassifyOptions" :key="index"
							:class="index==classFyIndex?'chooseItem':(classFyIndex=='-1'?item.dictValue == searchParam.schoolClassify?'chooseItem':'':'')"
							@click="classFyIndex = index">{{item.dictLabel}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		addMyContrast
	} from "@/api/index.js"
	import {
		pageBaseSchool,
		selectList,
		getCityList
	} from "@/api/toolbox.js"

	export default {
		data() {
			return {
				searchPopup:false,
				options: [],
				options1: [],
				schoolClassifyOptions: [],
				popType: 1,
				total: 0,
				arreaName: '',
				option1Name: '',
				classFyName: '',
				optionsIndex: '', //省份选择
				options1Index: '', //学校层次选择
				classFyIndex: '', //学校类型选择

				searchParam: {
					areaId: "", //省份
					pageNum: 1,
					pageSize: 10,
					reasonable: true,
					schoolClassify: "", //学习类型
					schoolType: "", //学习层次
					title: "", //学校名称
					isKwkd: true,
					year: ""
				},
				colorList: {
					'综合': 'rgba(250, 205, 145, 0.6)',
					'理工': 'rgba(2, 167, 240, 0.6)',
					'财经': 'rgba(194, 128, 255, 0.6)',
					'医药': 'rgba(236, 128, 141, 0.6)',
					'民族': 'rgba(25, 204, 165, 0.6)',
					'农林': 'rgba(168,186,4,0.6)',
					'师范': 'rgba(8,164,54,0.62)',
					'体育': 'rgba(24,47,198,0.62)',
					'文法': 'rgba(192,23,118,0.62)',
					'艺术': 'rgba(20,97,119,0.62)'
				},
				schoolList: [],
			}
		},
		onShow() {
			this.getOptions();
			this.getData();
		},
		methods: {
			handleSearch() {
				this.searchParam.pageNum = 1;
				this.total = 1;
				// this.schoolList = [];
				this.getData();
			},
			handleClear() {
				this.searchParam.title = '';
				this.handleSearch();
			},

			getOptions() {
				// 获取省份
				getCityList().then((res) => {
					this.options = res.data;
					this.options.unshift({
						fullName: '全部',
						id: ''
					});
				});
				// 获取学校层次
				selectList('school_type').then((res) => {
					this.options1 = res.rows;
					this.options1.unshift({
						dictLabel: '全部',
						dictValue: ''
					});
				})
				//获取学校类型
				selectList('school_classify').then((res) => {
					this.schoolClassifyOptions = res.rows;
					this.schoolClassifyOptions.unshift({
						dictLabel: '全部',
						dictValue: ''
					});
				});
			},
			/**
			 * @param {Object} type 1、省份，2、学校层次，3、学校类型
			 */
			handlePopup(type) {
				this.popType = type;
				this.searchPopup = true;
			},
			// 搜索弹框确认按钮
			handleSure() {
				if (this.popType == 1) {
					this.arreaName = this.options[this.optionsIndex].fullName;
					if (this.optionsIndex == 0) {
						this.arreaName = '';
					}
					this.searchParam.areaId = this.options[this.optionsIndex].id;
				}
				if (this.popType == 2) {
					this.option1Name = this.options1[this.options1Index].dictLabel;
					if (this.options1Index == 0) {
						this.option1Name = '';
					}
					this.searchParam.schoolType = this.options1[this.options1Index].dictValue
				}
				if (this.popType == 3) {
					this.classFyName = this.schoolClassifyOptions[this.classFyIndex].dictLabel;
					if (this.classFyIndex == 0) {
						this.classFyName = '';
					}
					this.searchParam.schoolClassify = this.schoolClassifyOptions[this.classFyIndex].dictValue
				}
				this.searchPopup = false;
				this.handleSearch();
			},
			// 搜索弹框取消按钮
			handleCancel() {
				this.optionsIndex = '-1';
				this.options1Index = '-1';
				this.classFyIndex = '-1';
				this.searchPopup = false;
			},


			getData() {
				uni.showLoading({
					title: '数据加载中'
				})
				pageBaseSchool(this.searchParam).then((res) => {
					uni.hideLoading()
					if (res.code == 100000) {
						// this.schoolList = res.data.rows;
						if (this.searchParam.pageNum == 1) {
							this.schoolList = res.data.rows;
							this.total = res.data.total;
							return
						}
						this.schoolList.push.apply(this.schoolList, res.data.rows);
					}
				}).catch(() => {
					uni.hideLoading()
				})
			},

			// 加入对比库
			handAdd(item) {
				addMyContrast({
					collegeCode: item.collegeCode,
					createTime: item.createTime,
					isDel: 0,
					majorCode: item.majorCode,
					schoolCode: item.schoolCode,
					updateTime: item.updateTime,
					year: item.year,
				}).then(res => {
					console.log(res);
					if (res.code == 100000) {
						uni.showToast({
							title: '加入对比库成功',
							icon: 'none'
						})
					}
				})
			},

			handleClick(item) {
				uni.navigateTo({
					url: `/pages/toolbox/chooseMajor/school/schoolDetail?schoolCode=${item.schoolCode}&title=${item.title}`
				})
			},

			//底部刷新
			onReachBottom() {
				if (this.schoolList.length >= this.total) return;
				// if(!this.isNext) return;
				this.searchParam.pageNum++;
				this.getData();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.school {
		background: #f2f2f2;
		height: 100%;
		min-height: 100vh;

		.top-bg {
			width: 100%;
			height: 280rpx;
			background: rgba(247, 221, 94, 0.8);
		}

		.contents {
			.searchs {
				margin: -80rpx 30rpx 40rpx 30rpx;
				height: 208rpx;
				background: #ffffff;
				box-shadow: 0 0 12rpx rgba(0, 0, 0, .2);
				border-radius: 20rpx;
				position: sticky;
				top: 0rpx;
				/* #ifdef H5 */
				top: 80rpx;
				/* #endif */
				z-index: 2;

				.search-box {
					padding-top: 30rpx;

					.input-box {
						align-items: center;
						justify-content: center;
						border: 1px solid rgba(242, 242, 242, 1);
						border-radius: 50rpx;
						margin: 0 30rpx;
						height: 68rpx;

						input {
							margin: 0 10rpx;
							width: 400rpx;
						}
					}
				}

				.other-box {
					margin-top: 30rpx;
					// align-items: center;
					justify-content: space-around;

					// justify-content: center;
					// margin: auto;
					.search-select {
						color: #666666;
						// width: 244rpx;
						// margin: auto 30rpx;
						text-align: center;
					}

					.select-item {
						color: #F7DD5E;
					}
				}

			}


			.lists {

				// padding-top: 30rpx;
				// padding-bottom: 20rpx;
				.content-item {
					background: #ffffff;
					margin: 0 30rpx 40rpx;
					border-radius: 30rpx;
					box-shadow: 0 0 12rpx rgba(0, 0, 0, .3);
					padding-bottom: 70rpx;

					.classFy {
						// position: absolute;
						margin-bottom: 8rpx;
						width: 100rpx;
						height: 52rpx;
						line-height: 52rpx;
						background: rgba(25, 204, 165, 0.6);
						border-radius: 30rpx;
						border-top-right-radius: 0px;
						border-bottom-left-radius: 0px;
						color: #FFFFFF;
						text-align: center;
						position: absolute;
						z-index: 1;
					}

					.left {
						margin: auto 0;

						image {
							width: 160rpx;
							height: 160rpx;
							border-radius: 50%;
							margin: 0 30rpx
						}
					}

					.right {

						// margin-left: 48rpx;
						.title {
							margin: 30rpx 0 20rpx 0;
							font-style: normal;
							color: #333333;
							align-items: center;

							.hot-num {
								margin-right: 10rpx;
								align-items: flex-end;
								line-height: 1em;
								color: #FF7101;
							}

							image {
								margin: 0 2rpx 0 30rpx;
								width: 30rpx;
								height: 30rpx;
							}
						}

						.area-name {
							color: #7F7F7F;
							padding-bottom: 20rpx;
							align-items: center;

							.area-icon {
								margin-right: 4rpx;
								// width: 30rpx;
								// height: 30rpx;
							}
						}

						.type {
							.name {
								height: 36rpx;
								line-height: 36rpx;
								text-align: center;
								color: #333;
								border: 1px solid rgba(247, 221, 94, 1);
								background: rgba(247, 221, 94, 0.1);
								border-radius: 30rpx;
								padding: 0 10rpx;
								margin: 0 8rpx 14rpx 0;
							}
						}
					}

					.add-btn {
						width: 200rpx;
						height: 80rpx;
						background-color: rgba(247, 221, 94, 0.8);
						border-radius: 30rpx;
						border-top-right-radius: 0px;
						border-bottom-left-radius: 0px;
						color: #000000;
						align-items: center;
						justify-content: center;
						position: absolute;
						right: 20rpx;
						margin-top: 10rpx;
					}
				}
			}


		}

		.noMore-data {
			text-align: center;
			color: #afafaf;
			padding-bottom: 20rpx;
		}

		.popup-box {
			background: #fff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			padding: 30rpx;

			.btns {
				align-items: center;
				justify-content: space-between;
				margin: 10rpx 0;

				.cancel {
					color: #AFAFAF;
				}

				.sure {
					color: #F7DD5E;
				}
			}

			.search-contents {
				text-align: center;
				line-height: 70rpx;
				overflow-x: hidden;
				height: 500rpx;
				// background: #F7DD5E;

				.chooseItem {
					background-color: rgba(253, 224, 128, 0.3);
				}
			}

		}
	}
</style>